<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>通讯录</title>

    <link href="../../../css/user/setting.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>
    <style>
        .group-title {
            line-height: 4rem;
            font-size: 1.2rem;
            font-weight: 400;
            color: #999;
            padding-left: 2rem;
            background-color: #F3F3F3;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>通讯录</span>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
    </div>
    <div class="container setting " style='padding-top: 8rem;height:100%;overflow: auto'>
        <div class="card-box li">

            <div v-for="item in contactList">
                <div class="group-title">
                    {{item.insSideName}}
                </div>
                <div class="xlb-li">
                    <div v-for="item in item.list">
                        <div class="left">{{item.name}}</div>
                        <div class="right">{{item.phone}} <img @click="callPhone(item.abutmentUserPhone)"  src="../../../img/common/btn_phone@3x.png" alt=""></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            contactList:[]

        },
        methods: {
            initList:function () {
                Resource.get(USER_CONTACT_NEW_API, {}, function(res) {
                    vm.contactList = res;
                })
            },
            //打电话
            callPhone:function (phone) {
                goCallPhone(phone);
            },
        }
    });
    //监听初始化
    mui.plusReady(function () {
        vm.initList();
    });
</script>
</body>
</html>
